<template>
  <div>
    <div class="center-dashboard">
      <div
        class="dashboardCenter"
        ref="dashboardCenter"
        style="width: 220px; height: 220px"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // key: value
    };
  },
  mounted() {
    this.setOptionDashboardCenter();
  },
  methods: {
    setOptionDashboardCenter() {
      // 中间仪表盘
      const myChartDom = this.$refs.dashboardCenter;
      const myChart = this.$echarts.init(myChartDom);
      // var dataArr = this.ordSatisfyRate; // ordSatisfyRate
      var dataArr = 80.2; // ordSatisfyRate
      const current_time = new Date().getTime(); // 现在的时间
      const time_end = new Date(this.expectedValue).getTime(); // 截止的时间
      //这两个时间进行比较就可以了
      let ratio = 93;
      if (current_time >= time_end) {
        ratio = 95;
      }
      const shadowColorRed = "rgba(214,164,156,0.9)";
      const shadowColorGreen = "rgba(104,134,91,0.9)";
      const shadowColorRedStart = "rgba(214,164,156,0)";
      const shadowColorGreenStart = "rgba(104,134,91,0)";
      let bgColor = shadowColorRed;
      let bgColorStart = shadowColorRedStart;
      if (dataArr >= ratio) {
        bgColor = shadowColorGreen;
        bgColorStart = shadowColorGreenStart;
      }
      var colorSet = {
        color: "#0063E7"
      };
      const DataName = "Xi'an RDC";
      const option = {
        backgroundColor:'#021434',
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "最外部进度条",
            type: "gauge",
            radius: "80%",
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)",
                width: 0
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            itemStyle: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: "title",
                value: dataArr
              }
            ],
            pointer: {
              show: false
            },
            animationDuration: 4000
          },
          {
            name: "内部阴影",
            type: "gauge",
            center: ["51.5%", "51%"],
            radius: "90%", // 最外圈有颜色的背景的地方
            z: 4,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    dataArr / 100,
                    new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: bgColorStart
                      },
                      {
                        offset: 0.3,
                        color: bgColorStart
                      },
                      {
                        offset: 1,
                        // color: 'rgba(214,164,156,0.9)',
                        color: bgColor
                      }
                    ])
                  ],
                  [1, "rgba(28,128,245,.0)"]
                ],
                width: 40 // 控制外层阴影的宽度
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            itemStyle: {
              show: false
            },
            detail: {
              formatter: function(value) {
                if (value !== 0) {
                  return value + "%";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, 5],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontFamily: "Volvo-Novum-Bold",
                fontSize: 30,
                color: bgColor
              }
            },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: "title",
                value: dataArr
              }
            ],
            pointer: {
              show: false
            }
          },
          {
            name: "内部圈",
            type: "gauge",
            z: 2,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "80%",
            axisLine: {
              lineStyle: {
                color: [[1, colorSet.color]],
                width: 0
              }
            },
            tooltip: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            // itemStyle: {
            //   show: false
            // },
            // detail: {
            //   show: false
            // },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: "title",
                value: dataArr
              }
            ],
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,1)"
              }
            },
            detail: {
              show: true,
              offsetCenter: [0, "95%"],
              formatter: DataName,
              textStyle: {
                fontSize: 16,
                color: "rgba(255,255,255,.7)"
              }
            },
            pointer: {
              show: true,
              length: "100%",
              radius: "20%",
              width: 3 //指针粗细
            },
            animationDuration: 4000
          },
          {
            name: "内部刻度",
            type: "gauge",
            center: ["51.5%", "51%"],
            radius: "83%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
              lineStyle: {
                width: 5,
                color: [[1, "#1087e2"]]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,.8)",
              distance: 2,
              fontSize: 8,
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "20":
                    return "20";
                  case "40":
                    return "40";
                  case "60":
                    return "60";
                  case "80":
                    return "80";
                  case "100":
                    return "100";
                }
              }
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: "rgba(255,255,255,.8)", //用颜色渐变函数不起作用
                width: 1
              },
              length: 4
            }, //刻度样式
            splitLine: {
              show: true,
              length: 8,
              lineStyle: {
                color: "rgba(255,255,255,.8)" //用颜色渐变函数不起作用
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            //指针上的圆
            type: "pie",
            tooltip: {
              show: false
            },
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ["0%", "50%"],
            center: ["51.5%", "51%"],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 120,
                itemStyle: {
                  normal: {
                    color: "rgb(15,31,51)"
                  }
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.center-dashboard {
  width: 500px;
  height: 500px;
  margin: 50px auto;
}
</style>
